@import "../base/spacing";
@import "../base/colors";

@import "./components/tooltip";
@import "./components/tag";

.builtin-wrapper.bookmarks-wrapper {

  .search-container {

    > .tag {
      position: absolute;
      right: 10px;
      top: 7px;
    }

    .dropdown-items.filters {
      width: 255px;

      .tag-cloud {
        padding: 0 10px;
      }

      input.underline {
        margin: 5px 10px;
        width: 235px;
      }
    }
  }

  .builtin-sidebar {

    .section.tags {
      display: none;

      @media (min-width: 1050px) {
        display: block;
      }
    }
  }

  .builtin-main {

    .ll-row {
      width: 100%;

      .row-modifier {
        position: absolute;
      }

      .title {
        max-width: 300px;
      }

      .url {
        margin-right: 5px;
      }

      .tags {
        &:extend(.overflow-ellipsis);
        max-width: 150px;
      }

      .btn.action {
        margin-left: 5px;

        .fa {
          margin-left: 0;
        }

        &.bookmark {

          .fa-star:hover {
            color: #fff;
            -webkit-text-stroke: 1px #aaa;
          }
        }

        &.pin {

          &.pinned {

            .fa {
              color: @blue;
            }
          }
        }
      }

      .avatar {
        border: 2px solid #fafafa;
        border-radius: 50%;
        width: 20px;
        height: 20px;
      }

      .link {
        width: 100%;

        // account for the actions
        margin-right: 30px;
      }

      .notes {
        font-size: 12.5px;
        white-space: normal;
        line-height: 1.45;
      }

      .link {
        max-width: initial;
        margin-right: 0;
      }

      .url {
        margin-right: 5px;
      }

      .separator {
        font-size: 10px;
      }

      .separator,
      .fa-globe {
        color: rgba(0,0,0,.4);
      }

      .tags {
        display: flex;
        height: 17px;
        margin-top: 15px;
        margin-left: 42px;

        .tag {
          color: @blue;
          font-size: 12px;
        }

        &.empty {
          display: none;
        }
      }
    }
  }
}